<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘</title>
    <style>/*css样式 网格装饰*/
    body{
        margin: 0;/* 外边距 0不用给单位*/
    }
    .keyboard{
        display: grid;/*网格布局*/
        /*把网格分为多少列，每一列多少像素*/
        grid-template-columns: repeat(30,30px);
        /*把网格分为多少行，每一列多少像素*/
        grid-template-rows: repeat(5,60px);
        gap: 5px;/*内部元素 网格间距*/
        width: 1050px;/*宽度：1050像素*/
        height: 325px;
        margin: 50px auto;/*上下左右自动居中*/
        background-color: #C5C5C5;/*背景颜色*/
        padding: 20px;/*内边距*/
        border-radius: 20px;
    }
    .key{
        grid-column: span 2;/*合并单元格*/
        background-color: #F3F3F3;
        border: 2px solid #000;
        line-height: 60px;/*行高=高度 垂直居中*/
        text-align: center;/*文本对齐方式 居中*/
        border-radius: 8px;
    }
    .key:hover{/*当你鼠标移动到名字叫key里执行{}中的代码*/
        border-color: white;
    }
    /*
        table布局   13 之后就很少用了
    */
    .delete,
    .capslock,
    .enter,
    .command{
        grid-column: span 4;
    }
    .tab,
    .backslash,
    .ctrl
    {
        grid-column: span 3;
    }
    .shift{
        grid-column: span 5;
    }
    .space{
        grid-column: span 12;
    }
    </style>
</head>
<body><!--写给用户看的，写给人看的-->
<div class="keyboard"><!--盒子标签-->
    <div class="key">~</div>
    <div class="key">1</div>
    <div class="key">2</div>
    <div class="key">3</div>
    <div class="key">4</div>
    <div class="key">5</div>
    <div class="key">6</div>
    <div class="key">7</div>
    <div class="key">8</div>
    <div class="key">9</div>
    <div class="key">0</div>
    <div class="key">-</div>
    <div class="key">+</div>
    <div class="key delete">Delete</div>
    <div class="key tab">Tab</div>
    <div class="key">q</div>
    <div class="key">w</div>
    <div class="key">e</div>
    <div class="key">r</div>
    <div class="key">t</div>
    <div class="key">y</div>
    <div class="key">u</div>
    <div class="key">i</div>
    <div class="key">o</div>
    <div class="key">p</div>
    <div class="key">[</div>
    <div class="key">]</div>
    <div class="key backslash">\</div>
    <div class="key capslock">Capslock</div>
    <div class="key">a</div>
    <div class="key">s</div>
    <div class="key">d</div>
    <div class="key">f</div>
    <div class="key">g</div>
    <div class="key">h</div>
    <div class="key">j</div>
    <div class="key">k</div>
    <div class="key">l</div>
    <div class="key">;</div>
    <div class="key">'</div>
    <div class="key enter">Enter</div>
    <div class="key shift">Shift</div>
    <div class="key">z</div>
    <div class="key">x</div>
    <div class="key">c</div>
    <div class="key">v</div>
    <div class="key">b</div>
    <div class="key">n</div>
    <div class="key">m</div>
    <div class="key">,</div>
    <div class="key">.</div>
    <div class="key">/</div>
    <div class="key shift">Shift</div>
    <div class="key ctrl">Ctrl</div>
    <div class="key">Fn</div>
    <div class="key">Win</div>
    <div class="key">Alt</div>
    <div class="key space">Space</div>
    <div class="key">Alt</div>
    <div class="key command">Command</div>
    <div class="key ctrl">Ctrl</div>

</div>
</body>
</html>